{% extends "base.html" %}

{% block main %}
        {% if featured %}
    	<div id="pets">
	        <h2>Featured Pets</h2>
	        <div id="featuredPets" class="clearfix">
	            {% for pet in featured %}
	        	<div class="pet {% if forloop.last %}last{% endif %}">
	        		<div class="thumb"><a href="/adoptions-{{ pet.animal|slugify }}-{{ pet.name|slugify }}-{{ pet.id }}.html"><img src="{{ pet.photos.1.x }}" alt="{{ pet.name }}" {% cropimg pet.photos.1.info.1 pet.photos.1.info.2 142 117 %} /></a></div>
	        		<div class="name"><a href="/adoptions-{{ pet.animal|slugify }}-{{ pet.name|slugify }}-{{ pet.id }}.html">{{ pet.name }}</a></div>
	        	</div>
	            {% endfor %}
	        </div>
			<h2>Available Pets</h2>
<!--
	        <div id="showPets">
	        	<form id="petType" name="petType" action="" method="get">
		        	<select id="type">
		        		<option value="all">All Pets</option>
		        		<option value="dog">Dogs</option>
		        		<option value="cat">Cats</option>
		        	</select>
	        	</form>
	        </div>
-->
			<div id="availablePets" class="clearfix">
	            {% for pet in pets %}
	        	<div class="pet{% if forloop.counter|divisibleby:4 %} last{% endif %}">
	        		<div class="thumb"><a href="/adoptions-{{ pet.animal|slugify }}-{{ pet.name|slugify }}-{{ pet.id }}.html"><img src="{{ pet.photos.1.x }}" alt="{{ pet.name }}" {% cropimg pet.photos.1.info.1 pet.photos.1.info.2 142 117 %} /></a></div>
	        		<div class="name"><a href="/adoptions-{{ pet.animal|slugify }}-{{ pet.name|slugify }}-{{ pet.id }}.html">{{ pet.name }}</a></div>
	        	</div>
	            {% endfor %}
	        </div>
	        <div class="petPag">
	        	<a href="#">See more pets!</a>
	        </div><!-- petPag -->
        </div><!-- close pets -->
        {% endif %}
        <div class="sidebar">
        	<div class="payPalVerified"><img src="images/paypal_seal.gif"></div>
        	<div class="ad">
        		<img src="https://www.google.com/adsense/static/en_US/images/exampleWideSkyscraper.gif" alt="ad"/>
        	</div>
        </div><!-- close sidebar -->
{% endblock main %}

{% block javascript %}
{{ block.super }}
<script src="js/ajaxPagination.js"></script>  
{% endblock javascript %}


